<!-- z-paging-x自定义的下拉刷新view -->
<template>
	<view class="refresher-container">
		<!-- 这里的图片请换成自己项目的图片 -->
		<image class="refresher-image" mode="aspectFit" src="../../static/01.gif"></image>
		<text class="refresher-text">{{ statusText }}</text>
	</view>
</template>

<script>
	export default {
		props: {
			status: {
				type: String, // 修改为 String 类型
				default: 'default', // 默认值
			},
		},
		computed: {
			statusText() {
				const statusTextArr = [
					'哎呀，用点力继续下拉嘛！', // 对应 'default'
					'拉疼我啦，松手刷新~~', // 对应 'release-to-refresh'
					'小兔子正在努力刷新...',
					'刷新成功啦~~'
				];

				// 根据 status 返回对应的文本
				if (this.status === 'release-to-refresh') {
					return statusTextArr[1]; // 返回第二个文本
				}
				return statusTextArr[0]; // 默认返回第一个文本
			}
		}
	}
</script>

<style scoped>
	.refresher-container {
		/* #ifndef UNI-APP-X */
		display: flex;
		/* #endif */
		/* 这里下拉刷新view高度需要用px，否则在iOS中下拉刷新view会被展示在最底部 */
		height: 90px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: white;
	}

	.refresher-image {
		margin-top: 10rpx;
		height: 50px;
		width: 120px;
	}

	.refresher-text {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #666666;
	}
</style>